<template>
  <div class="home">
    <ul class="list">
      <li>
        <i class="el-icon-notebook-2"></i>
        <div class="text">
          <span>总订单</span>
          <p>{{ totalOrder | capitalize }}单</p>
        </div>
      </li>
      <li>
        <i class="el-icon-money"></i>
        <div class="text">
          <span>总销售额</span>
          <p>{{ totalAmount | capitalize }}元</p>
        </div>
      </li>
      <li>
        <i class="el-icon-s-order"></i>
        <div class="text">
          <span>今日订单</span>
          <p>{{ todayOrder | capitalize }}单</p>
        </div>
      </li>
      <li>
        <i class="el-icon-coin"></i>
        <div class="text">
          <span>今日营销额</span>
          <p>{{ totayAmount | capitalize }}元</p>
        </div>
      </li>
    </ul>

    <!--创建一个echarts的容器-->
    <div ref="main" class="echarts"></div>
  </div>
</template>

<script>
//引入echarts
import * as echarts from "echarts";

import { orderTotalData } from "../../api/order";
export default {
  data() {
    return {
      myChart: "",
      headerData: {},
      totalOrder: "",
      totalAmount: "",
      todayOrder: "",
      totayAmount: "",
    };
  },
  async mounted() {
    //从后端获取数据
    let res = await orderTotalData();
    console.log(res);
    let {
      xData,
      orderData,
      amountData,
      totalOrder,
      totalAmount,
      todayOrder,
      totayAmount,
    } = res;
    this.totalOrder = totalOrder;
    this.totalAmount = totalAmount;
    this.todayOrder = todayOrder;
    this.totayAmount = totayAmount;
    this.drawLine(xData, orderData, amountData);

    //添加一个窗口发生改变事件
    window.addEventListener("resize", this.resizeHandle);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandle);
  },
  filters: {
    capitalize: function (val) {
      return (+val || 0)
        .toFixed(0)
        .replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,");
    },
  },
  methods: {
    //适配echarts
    resizeHandle() {
      this.myChart.resize();
    },
    //获取首页数据
    drawLine(xData, orderData, amountData) {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(this.$refs.main);
      // 绘制图表
      let option = {
        title: { text: "数据统计", left: "20px" },
        tooltip: {},
        legend: {
          data: ["订单数据", "订单金额"],
        },
        xAxis: {
          data: xData,
        },
        yAxis: {
          type: "value",
        },
        toolbox: {
          feature: {
            saveAsImage: {},
            magicType: {
              type: ["line", "bar", "stack"],
            },
          },
        },
        series: [
          {
            name: "订单数据",
            type: "line",
            stack: "Total",
            data: orderData,
          },
          {
            name: "订单金额",
            type: "line",
            stack: "Total",
            data: amountData,
          },
        ],
      };
      //画图
      this.myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  .list {
    width: 100%;
    display: flex;
    li {
      width: 25%;
      height: 140px;
      background-color: #fff;
      margin-left: 20px;
      position: relative;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgb(10 16 20 / 24%), 0 0 1px rgb(10 16 20 / 12%);
      &:nth-child(1) {
        margin: 0;
      }
      .text {
        position: absolute;
        right: 20px;
        top: 50px;
        font-size: 20px;
        span {
          color: #ccc;
        }
        p {
          line-height: 30px;
          font-weight: bold;
        }
      }
    }
    i {
      font-size: 80px;
      padding: 20px 0 0 40px;
    }
    .el-icon-notebook-2,
    .el-icon-s-order {
      color: #1296db;
    }
    .el-icon-s-order {
      color: #d4237a;
    }
    .el-icon-coin {
      color: #1afa29;
    }
  }
  .echarts {
    margin-top: 20px;
    width: 100%;
    height: 400px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(10, 16, 20, 0.24),
      0 0 2px rgba(10, 16, 20, 0.12);
    padding: 20px;
  }
}
</style>